<!-- 旭日图 -->
<template>
  <div class="chartcontainer">
    <div :style="{'margin-bottom':'10px'}"  v-if="title">{{title}}</div>
    <div :id="'myChart'+chartData.id" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: ["diyposition","chartData", "colors", "theme", "title", "field"],
  data() {
    return {}
  },
  watch: {
    chartData(newvalue) {
      this.drawLine(newvalue.rows);
    }
  },
  methods: {
    drawLine(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"+this.chartData.id),this.theme);
      // 绘制图表
      myChart.setOption({
        series: {
          type: "sunburst",
          // highlightPolicy: 'ancestor',
          data: data,
          radius: [0, "90%"],
          label: {
            rotate: "radial"
          }
        }
      });
    }
  },
  created() {
    setTimeout(() => {
      this.drawLine(this.chartData.rows);
    }, 500);
  }
};
</script>
<style scoped>
.chartcontainer {
  width: 100%;
  height: 100%;
}
</style>